<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            display: none;
        }
    </style>
</head>
<body>

    <div>
        <button style="color: red;">1</button>
        <button>2</button>
        <button>3</button>
    </div>
    <div>
        <p style="display: block;">1</p>
        <p>2</p>
        <p>3</p>
    </div>

    <script>

        // 写结构和样式


        // 选项卡
        //   上半部分   单选效果
        //   下半部分
        //       先隐藏所有的p ，显示当前的p
        //          当前的p就是点击的第几个按钮对应的第几个p  --- 只要找到点击的是第几个按钮就好了
        

        // 给按钮绑定事件之前，先给每个按钮添加自定义属性，值是下标，也就是为了点击的时候找到第几个






        var oBtns = document.querySelectorAll('button') ;   // NodeList 类数组
        console.log(oBtns) ;
        var oPs = document.querySelectorAll('p') ;  
        // oBtns.forEach(function(v){
        //     v.onclick = function() {
        //         console.log(this) ;
        //     }
        // })


        for(var i = 0 ; i < oBtns.length ; i++) {
            // 一开始给每一个button对象绑定一个自定义属性
            oBtns[i].index = i ;

            oBtns[i].onclick = function() {
                // 给所有的按钮去掉颜色
                for(var j = 0 ; j < oBtns.length ; j++) {
                    oBtns[j].style.color = 'black' ;
                }
                // 给当前添加
                this.style.color = 'red'

                // 给所有的p都隐藏掉
                for(var i = 0 ; i < oPs.length ; i++) {
                    oPs[i].style.display = 'none' ;
                }
                // 给当前的显示  ????????????
                var x = this.index ;
                console.log(x) ;
                oPs[x].style.display = 'block' ;
            }
        }

    </script>
    
</body>
</html>